<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/public/css/login.css">
</head>
<style>
    body {
        background: url(../public/img/bg.png) no-repeat 0px 0px;
        background-size: 1600px;
    }
</style>

<body>

    <div id="container">
        <h1>登录</h1>

        <form id="login_form">
            <input type="email" id="email" name="email" placeholder="E-mail" autofocus>
            <input type="password" id="password" name="password" placeholder="Password">
            <button type="submit" class="orange-btn">登录</button>
            <div id="down_container">
                <span id="forgotten">忘记密码？</span>
                <span id="sign_in"><a href="/register">创建账户</a></span>
            </div>
        </form>
    </div>

    <!-- Forgotten Password Container -->
    <div id="forgotten-container">
        <h1>忘记密码</h1>
        <form>
            <input type="email" name="email" placeholder="E-mail">
            <button class="orange-btn">获取新密码</button>
        </form>
    </div>

    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script>
        $('#login_form').on('submit', function(e) {
            e.preventDefault()
                // 表单序列化
            var formData = $(this).serialize()
            console.log(formData)
            $.ajax({
                url: '/login',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function(data) {
                    var err_code = data.err_code
                    if (err_code === 0) {
                        // window.alert('注册成功！')
                        // 服务端重定向针对异步请求无效
                        window.location.href = '/index'
                    } else if (err_code === 1) {
                        window.alert('邮箱或者密码错误')
                    } else if (err_code === 500) {
                        window.alert('服务器忙，请稍后重试！')
                    }
                }
            })
        })
    </script>

    <script>
        $('#login-button').click(function() {
            $('#login-button').fadeOut("slow", function() {
                $("#container").fadeIn();
            });
        });


        /* Forgotten Password */
        $('#forgotten').click(function() {
            $("#container").fadeOut(function() {
                $("#forgotten-container").fadeIn();
            });
        });
    </script>
</body>

</html>